<template>
    <div class="qilin-QilinTree beauty-scrollbar-y">
        <el-tree
            ref="QilinTree"
            :data="ownTreeConfig.data"
            :props="ownTreeConfig.props"
            :show-checkbox="ownTreeConfig.itemConfig?.showCheckbox || false"
            :node-key="ownTreeConfig.itemConfig?.nodeKey || 'id' "
            :check-on-click-node="ownTreeConfig.itemConfig?.checkOnClickNode ?? true "
            :current-node-key="ownTreeConfig.itemConfig?.currentNodeKey || '' "
            :highlight-current="ownTreeConfig.itemConfig?.highlightCurrent ?? true"
            :default-checked-keys="ownTreeConfig.itemConfig?.defaultCheckedKeys || [] "
            :default-expanded-keys="ownTreeConfig.itemConfig?.defaultExpandedKeys || [] "
            :check-strictly="ownTreeConfig.itemConfig?.checkStrictly || false"
            :filter-node-method="ownTreeConfig.itemConfig?.filterNodeMethod"
            @check-change="ownTreeConfig.itemConfig?.checkChange"
            @current-change="ownTreeConfig.itemConfig?.currentChange"
            @node-click="ownTreeConfig.itemConfig?.nodeClick"
            @check="ownTreeConfig.itemConfig?.check"
        ></el-tree>
    </div>
</template>

<script setup>
// 接收来自父组件的传参
const propsValue=defineProps({
    treeConfig:{
        type:Object,
        default(){
            return {
                itemConfig:{
                    showCheckbox:false, //是否显示复选框
                    nodeKey:"id", //每个树节点用来作为唯一标识的属性
                    checkOnClickNode:true, //是否在点击节点的时候选中节点，默认只有在点击复选框才会选中节点
                    currentNodeKey:"", //当前选中的节点
                    highlightCurrent:true, //是否高亮当前选中节点
                    defaultCheckedKeys:[], //默认选中的节点key的数组
                    defaultExpandedKeys:[], //默认展开的节点key的数组
                    checkStrictly:false, //是否严格遵循父子不互相关联
                    filterNodeMethod:"", //过滤树节点方法
                    checkChange:"", //event事件
                    currentChange:"", //event事件
                    nodeClick:"", //event事件
                    check:"", //event事件
                },
                props:{},
                data:[], //展示的数据
                checkedData:[] //选中的数据
            };
        }
    }
});

// 暴露父组件自定义方法
const emits=defineEmits(["update:treeConfig"]);

// 组件自身的配置项
let ownTreeConfig=computed({
    get(){
        return propsValue.treeConfig;
    },
    set(val){
        emits("update:treeConfig",val);
    }
});
// 获取当前树组件DOM元素
let QilinTree=ref(null);

// 设置目前勾选的节点事件监听
const treeSetCheckedNodes=(nodes)=>{
    QilinTree.value.setCheckedNodes(nodes);
};
// 过滤树节点方法监听
const treeFilter=(value)=>{
    QilinTree.value.filter(value);
};

// 暴露子组件的自定义方法
defineExpose({
    treeSetCheckedNodes,
    treeFilter
});

// 生命周期逻辑区域

</script>

<style lang="scss" scoped>
.qilin-QilinTree{
    max-height:400px;
    margin:20px;
}
</style>
